import React, { Component } from 'react'
import { Row, Col, Card } from 'antd'

class Gallery extends Component {
    render() {
        // const imgs = [
        //     ['1.png', '2.png', '3.png', '4.png', '5.png'],
        //     ['6.png', '7.png', '8.png', '9.png', '10.png'],
        //     ['11.png', '12.png', '13.png', '14.png', '15.png'],
        //     ['16.png', '17.png', '18.png', '19.png', '20.png'],
        //     ['21.png', '22.png', '23.png', '24.png', '25.png']
        // ]

        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png'],
            ['6.png', '7.png', '8.png', '9.png', '10.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png'],
            ['16.png', '17.png', '18.png', '19.png', '20.png'],
            ['21.png', '22.png', '23.png', '24.png', '25.png'],
            ['3.png', '8.png', '13.png', '18.png']
        ]
        const imgList = imgs.map(list => list.map(item =>
            <Card key={item} cover={<img src={'/assets/gallery/' + item} alt="" />} style={{ marginBottom: 10 }}>
                <Card.Meta title="haiYang AntD" description="I Love You" />
            </Card>
        ))
        return (
            <div>
                <Row gutter={10}>
                    {
                        // imgList.map((item, index, arr) => {
                        //     return (
                        //         <Col md={4} key={index}>
                        //             {arr[index]}
                        //         </Col>
                        //     )
                        // })

                        imgList.map((item, index, arr) =>
                            <Col md={4} key={index}>
                                {arr[index]}
                            </Col>
                        )
                    }

                    {/* <Col md={5}>
                        {imgList[0]}
                    </Col>
                    <Col md={5}>
                        {imgList[1]}
                    </Col>
                    <Col md={5}>
                        {imgList[2]}
                    </Col>
                    <Col md={5}>
                        {imgList[3]}
                    </Col>
                    <Col md={4}>
                        {imgList[4]}
                    </Col> */}
                </Row>
            </div>
        )
    }
}

export default Gallery